<!-- 用户编辑弹窗 -->
<template>
  <ele-modal width="680px"
             :visible="visible"
             :append-to-body="true"
             :close-on-click-modal="true"
             custom-class="ele-dialog-form"
             :title="isUpdate ? '充值余额' : '充值余额'"
             @update:visible="updateVisible">
    <el-form ref="form"
             :model="form"
             :rules="rules"
             label-width="82px">
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="充值金额"
                        prop="balance"
                        class="delInput">
            <el-input clearable
                      type="number"
                      step="0.01"
                      v-model="form.balance"
                      placeholder="请输入余额" />
          </el-form-item>
        </el-col>
      </el-row>
      <activity-edit ref="edits"
                     :id="form.id"
                     @uploadPrice="uploadPrice"></activity-edit>
    </el-form>
    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary"
                 :loading="loading"
                 @click="save">
        保存
      </el-button>
    </template>
  </ele-modal>
</template>

<script>
import { emailReg, phoneReg } from 'ele-admin';
import RoleSelect from './role-select.vue';
import ActivityEdit from './activity-edit.vue';
import { addUser, updateTotalPlatformBalance, checkExistence } from '@/api/oem';
import { JSEncrypt } from "jsencrypt";

export default {
  components: { RoleSelect, ActivityEdit },
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  data () {
    const defaultForm = {
      oemType: 1,
      id: '',
    };
    return {
      defaultForm,
      // 表单数据
      form: { ...defaultForm },
      // 表单验证规则
      rules: {
        balance: [
          {
            required: true,
            message: '请输入充值金额',
            trigger: 'blur'
          }
        ],
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  methods: {
    uploadPrice (e) {
      console.log('e', this.from)
      // return
      this.confirm()
    },
    /* 保存编辑 */
    save () {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        this.loading = true;
        const data = {
          ...this.form,
        };
        const saveOrUpdate = this.isUpdate ? updateTotalPlatformBalance : addUser;
        if (!this.isUpdate) {
          let encryptor = new JSEncrypt()
          let pk = this.$store.state.signature.pk
          encryptor.setPublicKey(pk)
          data.password = encryptor.encrypt(data.password)
        }
        saveOrUpdate(data)
          .then((msg) => {
            this.loading = false;
            this.$message.success('充值成功');
            this.$nextTick(() => {
              this.$refs['edits'].clear()
            })
            this.form.counts = ''
            this.updateVisible(false);
            this.$emit('done');
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      });
    },
    /* 更新visible */
    updateVisible (value) {
      this.$emit('update:visible', value);
    },
    loadClick () {
      this.$nextTick(() => {
        this.$refs['edits'].show()
      })
    }
  },
  watch: {
    visible (visible) {
      if (visible) {
        if (this.data) {
          console.log("this.data", this.data)
          this.$util.assignObject(this.form, {
            ...this.data,
            password: null,
            sex: this.data.sex + ''
          });
          this.isUpdate = true;
          this.loadClick()
        } else {
          this.isUpdate = false;
        }
      } else {
        this.$refs.form.clearValidate();
        this.form = { ...this.defaultForm };
      }
      // 清空‘充值进入’输入框默认值
      this.form.counts = ''
      console.log("this.form", this.form)

    }
  }
};
</script>
<style scoped>
/*隐藏input（type=number)右边的小箭头*/
/* /deep/.delInput input::-webkit-outer-spin-button,
  /deep/.delInput input::-webkit-inner-spin-button {
    -webkit-appearance: none!important;
  }
  /deep/.delInput input[type="number"]{
    -moz-appearance: textfield;
  } */
</style>
